<template>
	<div class="bind-id-card-front-wrapper">
		<label class="label-container">{{ '身份证正面：' }}</label>
		<div class="select-contianer">
			<el-row>
				<el-col :span="12">
					<CardSelect
						:label="'身份证号'"
						:variableList="variableList"
						:roleList="roleList"
						:disabled="disabled"
						:activeRoleId="activeRoleId"
						:id="getCheckedID('idNumber')"
						@onCheck="data => changeCardProps('idNumber', data)"
						@clearValue="id => clearValue('idNumber', id)"
						@checkRole="checkRole"
					/>
				</el-col>
				<el-col :span="12">
					<CardSelect
						:label="'姓名'"
						:variableList="variableList"
						:roleList="roleList"
						:disabled="disabled"
						:activeRoleId="activeRoleId"
						:id="getCheckedID('name')"
						@onCheck="data => changeCardProps('name', data)"
						@clearValue="id => clearValue('name', id)"
						@checkRole="checkRole"
					/>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<CardSelect
						:label="'性别'"
						:variableList="variableList"
						:roleList="roleList"
						:disabled="disabled"
						:activeRoleId="activeRoleId"
						:id="getCheckedID('sex')"
						@checkRole="checkRole"
						@onCheck="data => changeCardProps('sex', data)"
						@clearValue="id => clearValue('sex', id)"
					/>
				</el-col>
				<el-col :span="12">
					<CardSelect
						:label="'民族'"
						:variableList="variableList"
						:roleList="roleList"
						:disabled="disabled"
						:activeRoleId="activeRoleId"
						:id="getCheckedID('ethnicity')"
						@checkRole="checkRole"
						@onCheck="data => changeCardProps('ethnicity', data)"
						@clearValue="id => clearValue('ethnicity', id)"
					/>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<CardSelect
						:label="'出生日期'"
						:variableList="variableList"
						:roleList="roleList"
						:activeRoleId="activeRoleId"
						:disabled="disabled"
						:id="getCheckedID('birthDate')"
						@checkRole="checkRole"
						@onCheck="data => changeCardProps('birthDate', data)"
						@clearValue="id => clearValue('birthDate', id)"
					/>
				</el-col>
				<el-col :span="12">
					<CardSelect
						:label="'住址'"
						:variableList="variableList"
						:roleList="roleList"
						:disabled="disabled"
						:activeRoleId="activeRoleId"
						:id="getCheckedID('address')"
						@checkRole="checkRole"
						@onCheck="data => changeCardProps('address', data)"
						@clearValue="id => clearValue('address', id)"
					/>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import CardSelect from './CardSelect.vue';
export default {
	components: { CardSelect },
	props: {
		variableList: {
			type: Array,
			default: () => []
		},
		roleList: {
			type: Array,
			default: () => []
		},
		identifyResult: {
			type: Array,
			default: () => []
		},
		activeRoleId: {
			type: Number,
			default: () => 0
		},
		disabled: {
			type: Boolean,
			default: () => false
		}
	},
	methods: {
		checkRole(id) {
			this.$emit('checkRole', id);
		},

		changeCardProps(type, data) {
			this.$emit('changeCardProps', type, data);
		},
		clearValue(type, id) {
			this.$emit('clearValue', { type, id });
		},
		getCheckedID(type) {
			if (this.identifyResult) {
				return this.identifyResult.find(item => item.fieldName === type)?.id || '';
			}
			return '';
		}
	}
};
</script>
<style lang="less" scoped>
.bind-id-card-front-wrapper {
	display: flex;
	.select-contianer {
		flex-grow: 1;
	}
	.label-container {
		width: 120px;
		line-height: 40px;
		text-align: center;
	}
}
</style>
